<template>
  <div class="community-container">
    <el-backtop :right="100" :bottom="100">
      <div
          style="
        height: 100%;
        border-radius: 10px;
        width: 100%;
        background-color: #808080;
        box-shadow: var(--el-box-shadow-lighter);
        text-align: center;
        line-height: 40px;
      color: #f6f6f6; ">
        ▲
      </div>
    </el-backtop>
    <el-dialog v-model="formView.dialog" title="发帖" width="500" class="my-el-dialog"
               style="background-color: #FEF6E9">
      <el-form :model="formAdd">
        <el-form-item label="标题" label-width="50px">
          <el-input v-model="formAdd.title" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="内容" label-width="50px">
          <el-input v-model="formAdd.content" type="textarea" autocomplete="off"/>
        </el-form-item>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="formView.dialog = false">取消</el-button>
          <el-button type="primary" @click="addPost()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 左侧部分 -->
    <div class="left-panel">
      <!-- 帖子框 -->
      <div class="post" v-for="(post, index) in posts" :key="index">
        <div class="post-info">
          <img :src="baseURL+'/file/download?filename=' + post.user_img" alt="Avatar" class="avatar"/>
          <div class="post-text">
            <h2 class="post-title">{{ post.title }}</h2>
            <p class="post-body">{{ post.content }}</p>
          </div>
        </div>
        <div class="actions">
          <button class="like-btn" @click="likePost(post)">点赞</button>
          <button class="favorite-btn" @click="favoritePost(post)">收藏</button>
        </div>
      </div>
    </div>

    <!-- 右侧部分 -->
    <div class="right-panel">
      <!-- 搜索框 -->
      <div class="search-box">
        <input type="text" v-model="formSearch.store_name" placeholder="搜索..."/>
        <button class="search-btn" @click="searchPosts">搜索</button>
      </div>

      <!-- 热门体验店 -->
      <div class="hot-shops">

        <div class="links">
          <el-table :data="hotShops" @row-click="rowClick"
                    height="300" style="width: 100%;color: black;" size="large">
            <el-table-column prop="store" label="热门体验店"/>
            <el-table-column prop="name" label="项目名称"/>
            <el-table-column prop="location" label="地址"/>
          </el-table>
        </div>

      </div>

      <!-- 按钮区域 -->
      <div class="button-section">
        <button class="new-post-btn" @click="createPost()">
          <div class="svg-bg"></div>&nbsp
          我要发帖
        </button>
      </div>


    </div>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue';
import {addPostApi, favoritesPostApi, getPostApi, likePostApi} from "@/api/post";
import {getStoreAPi} from "@/api/art";
import router from "@/router";
import {ElMessage} from "element-plus";
import {baseURL} from "@/api/request";
import {Delete, Plus} from "@element-plus/icons-vue";

// 模拟的帖子数据
const posts = ref([
  {avatar: 'avatar1.jpg', title: '标题1', content: '帖子正文1', id: 1, user_img: ""},
  // 添加更多帖子
]);
onMounted(() => {
  getData()
})
const hotShops = ref([
  {name: '链接1', link: '#'},
  {name: '链接2', link: '#'},
  {name: '链接3', link: '#'},
]);

function addPost() {
  ElMessage.closeAll()
  formAdd.store_name = formAdd.title;
  if (formAdd.title == '' || formAdd.content == '' || formAdd.store_name == '') {
    ElMessage.warning("请输入完整信息！")
    return
  }
  addPostApi(formAdd).then(() => {
    formView.dialog = false
    getData()
  })
}

const searchQuery = ref('');

const likePost = (post: any) => {

  likePostApi(post.id)
};

const favoritePost = (post: any) => {
  favoritesPostApi(post.id)
};
const formAdd = reactive({
  content: "",
  title: "",
  store_name: "",
  like: 0
})
const formSearch = reactive({
  store_name: "",
})
const formView = reactive({
  dialog: false,
})
const createPost = () => {
  formView.dialog = true
};

function getData() {
  getPostApi({store_name: formSearch.store_name}).then((res) => {
    console.log(res)
    posts.value = res.data
  })

  getStoreAPi({store: formSearch.store_name}).then((res) => {
    console.log(res)
    hotShops.value = res.data
  })
}

function rowClick(row: any, column: any, event: Event) {
  router.push({path: '/storeDetail', query: row});
}

const searchPosts = () => {
  getData()
};
</script>
<style>
.links {
  list-style-type: none;
  padding: 0;
  border-radius: 5px;
  background-color: #f9f9f9;
  overflow-y: auto;
  margin: 0;
}
</style>
<style scoped>


.my-el-dialog button {
  margin-left: 20px;
  background-color: #808080;
  color: #fff;
  font-family: '华文楷体', Arial, Helvetica, sans-serif;
}

.left-panel {
  margin-top: 50px;
  flex: 0 0 75%;
  padding: 20px;
}


.post-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.post-title {
  font-size: 18px;
  margin-bottom: 5px;
}

.post-body {
  font-size: 14px;
  color: #555;
  width: 350px;
}

.actions {
  margin-left: auto;
}

.actions buttonone {
  margin-left: 15px;
  padding: 5px 5px;
  background-color: #808080;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.actions buttonone:hover {
  background-color: #2980b9;
}


.button-section buttontwo {
  display: block;
  width: 200px;
  height: 60px;
  margin-bottom: 50px;
  margin-left: 30px;
  padding: 5px;
  background-color: transparent;
  color: black;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
}

.button-section buttontwo:hover {
  background-color: gray;
}

.search-box {
  margin-bottom: 30px;
  margin-left: 30px;
}

.search-box input[type="text"] {
  width: 160px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 3px 0 0 3px;
}

.search-box buttontwo {
  width: 50px;
  padding: 10px;
  background-color: gray;
  color: #fff;
  border: none;
  border-radius: 0 3px 3px 0;
  cursor: pointer;
}

.search-box buttontwo:hover {
  background-color: #c0392b;
}

.hot-shops {
  width: 400px;
  background-color: rgba(220, 220, 220, 0.3);
  padding: 0px;
  border-radius: 5px;
  border-bottom: 2px solid #ddd;
  margin-left: 30px;
}

.hot-shops h3 {
  font-size: 16px;
  margin-bottom: 10px;
}

.hot-shops ul {
  list-style-type: none;
}

.hot-shops ul li {
  margin-bottom: 5px;
}

.hot-shops ul li a {
  color: #3498db;
  text-decoration: none;
}


.community-container {
  display: flex;
}

.left-panel {
  flex: 2;
  padding: 10px;
}

.right-panel {
  flex: 0 0 30%; /* 占20%宽度 */
  padding: 30px;
  margin-top: 50px;
  border-left: 1px solid #ddd;
}

.post {
  display: flex;
  width: 600px;
  align-items: center;
  margin-bottom: 50px;
  margin-left: 150px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: white;

}

.post-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.post-text {
  flex: 1;
}

.actions {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

button {
  padding: 5px 10px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.like-btn {
  background-color: #808080;
  font-family: '华文楷体', Arial, Helvetica, sans-serif;
  color: white;

}

.favorite-btn {
  margin-left: 20px;
  background-color: #808080;
  color: #fff;
  font-family: '华文楷体', Arial, Helvetica, sans-serif;
}

.button-section {
  margin-top: 20px;
}

.svg-bg {
  width: 20px;
  height: 20px;
  background-image: url('@/assets/img/plus.svg');
  background-size: cover;
}

.new-post-btn {
  /*width: 200px;*/
  /*height: 60px;*/
  margin-bottom: 30px;
  margin-left: 30px;
  padding: 5px;
  background-color: transparent;
  /*color: black;*/
  /*border: 1px solid #ccc;*/
  border-radius: 3px;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.new-post-btn :hover {
  color: #6e2e0a !important;
}

.search-box button {
  width: 50px;
  padding: 10px;
  background-color: gray;
  color: #fff;
  border: none;
  border-radius: 0 3px 3px 0;
  cursor: pointer;
}

.search-box {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.search-box input {
  flex: 1;
  padding: 5px;
  margin-right: 10px;
}

.hot-shops ul {
  list-style: none;
  padding: 0;
}

.hot-shops li {
  margin-bottom: 10px;
}
</style>
